<template>
  <base-container>
    <avue-table-search
      v-model="searchParams"
      :option="searchOption"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    />
    <!-- 卡片容器 -->
    <base-table-card>
      <template #header-left>
        <el-tabs v-model="searchParams.status" @tab-change="loadGetTableData">
          <el-tab-pane v-for="item in tabPaneOptions" v-bind="item" :key="item.name" />
        </el-tabs>
      </template>
      <template #header-right>
        <div>
          <span>累计收入：0.00</span>
          <span class="px-10px">累计支出：0.00</span>
        </div>
      </template>
      <avue-crud
        v-model="formData"
        :data="tableData"
        :option="tableOption"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadGetTableData"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
        @row-save="loadAdd"
        @row-update="loadEdit"
      >
      </avue-crud>
    </base-table-card>
  </base-container>
</template>

<script setup>
  import useCrudHook from "avue-table/useCrudHook";
  import { searchOption, tableOption } from "@/crudOption/finance/AccountBalanceDetails";
  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    add: loadAdd,
    edit: loadEdit,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.customer.GetCustomerPage,
    search: { status: "01" },
    getParamsFormat: params => {
      // 开通时间
      if (params.createTime && params.createTime.length === 2) {
        params.createTimeStart = params.createTime[0];
        params.createTimeEnd = params.createTime[1];
        delete params.createTime;
      }
      // 到期时间
      if (params.expiredTime && params.expiredTime.length === 2) {
        params.expiredTimeStart = params.expiredTime[0];
        params.expiredTimeEnd = params.expiredTime[1];
        delete params.expiredTime;
      }
      // console.log(params, "params");
      // 返回查询参数
      return params;
    },
    add: Api.customer.AddCustomer,
    edit: Api.customer.UpdateCustomer,
  });
  const tabPaneOptions = ref([
    { label: "租金账户", name: "01" },
    { label: "资金账户", name: "02" },
    { label: "采购账户", name: "03" },
  ]);
  onMounted(() => {
    // 获取表格数据
    loadGetTableData();
  });
  //merchantAccount
</script>

<style lang="scss" scoped></style>
